<template>
  <div>
    <h4>
      1#这是一个测试题的题目 <i @click="showTips" class="el-icon-question"></i>
    </h4>
    <el-checkbox-group class="options" v-model="checkList">
      <el-checkbox label="A)测试题目选项1"></el-checkbox>
      <el-checkbox label="B)测试题目选项2"></el-checkbox>
      <el-checkbox label="C)测试题目选项3"></el-checkbox>
    </el-checkbox-group>
    <!--  -->
    <el-button-group>
      <el-button size="small" type="success" icon="el-icon-arrow-left"
        >上一题</el-button
      >
      <el-button size="small" type="success"
        >下一题<i class="el-icon-arrow-right el-icon--right"></i
      ></el-button>
    </el-button-group>
    <!--  -->
    <el-drawer title="我是标题" :modal="false" :visible.sync="drawer" size=30% :with-header="false">
      <div style="padding:15px">我来啦 </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkList: [],
      drawer: false,
    };
  },
  methods: {
    showTips() {
      this.drawer = true;
    },
  },
};
</script>

<style scoped>
.el-checkbox-group .el-checkbox {
  display: block;
  margin-bottom: 15px;
}

.options {
  margin-top: 15px;
}

.el-icon-question {
  cursor: pointer;
}
</style>